import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';

export default function PieChart1() {
    const chartRef = useRef(null);
    useEffect(() => {
        if (chartRef.current) {
            const pieChart = echarts.init(chartRef.current);
            let option = {
                color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    bottom: "18%",
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: "rgba(255,255,255,.5)",
                        fontSize: "12"
                    }
                },
                series: [
                    {
                        name: "年龄分布",
                        type: "pie",
                        // 修改饼形图的大小
                        radius: ["30%", "50%"],
                        center: ["50%", "35%"],
                        avoidLabelOverlap: false,
                        // 图形上的文字
                        label: {
                            show: false,
                            position: "center"
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1, name: "0岁以下" },
                            { value: 4, name: "20-29岁" },
                            { value: 2, name: "30-39岁" },
                            { value: 2, name: "40-49岁" },
                            { value: 1, name: "50岁以上" }
                        ]
                    }
                ]
            };
            pieChart.setOption(option);
            return () => {
                if (pieChart) {
                    pieChart.dispose();
                }
            }
        }
    }, [])
    return (
        <div className='PieChart1' ref={chartRef} style={{ width: '100%', height: "100%" }}></div>
    )
}
